import React, { Component } from 'react'
import { Tag } from 'antd';
import PropTypes from 'prop-types'
import emitter from '@/Evt.js';

const { CheckableTag } = Tag;


class HotTags extends React.Component {
    // 父组件传过来的参数
    static propTypes = {
        homeTagList: PropTypes.array.isRequired,
    }

  state = {
    selectedTags: [], //选中的标签
    chooseAll: false  // 是否选中全部标签
  };

  handleChange = (tag, checked) => {
    const { selectedTags } = this.state;
    const nextSelectedTags = checked ? [...selectedTags, tag] : selectedTags.filter(t => t !== tag);
    this.setState({ selectedTags: nextSelectedTags, chooseAll: nextSelectedTags.length == this.props.homeTagList.length ? true : false});
  }

  seletAll = ()=>{
      const { chooseAll } = this.state;
      
      this.setState({ 
          chooseAll: chooseAll ? false : true,
          selectedTags: chooseAll ? [] : this.props.homeTagList,
     });   
  }

  // 类似于vue 的watch
  componentDidUpdate = (prevProps, prevState) => {
    if (prevProps.chooseAll !== this.state.chooseAll) {
      
    }
  }

  render() {
    const { selectedTags, chooseAll } = this.state;
    return (
      <div>
        <span style={{ marginRight: 8 }}>选择标签:</span>
        <CheckableTag checked={chooseAll} onChange={this.seletAll}>
            全部
        </CheckableTag>
        {this.props.homeTagList.map((tag,index) => (
          <CheckableTag
            key={index}
            checked={selectedTags.indexOf(tag) > -1}
            onChange={checked => this.handleChange(tag, checked)}
          >
            {tag.value}
          </CheckableTag>
        ))}
      </div>
    );
  }
}

export default HotTags